<template>
    <div class="standard">
        <div class="standard-banner"></div>

        <div class="page-center">
            <div class="breadcrumb">
                <el-breadcrumb separator-class="el-icon-arrow-right" class="mt-20 mb-20">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/products' }">产品中心</el-breadcrumb-item>
                    <el-breadcrumb-item>环境，食品，农残，兽残标准品</el-breadcrumb-item>
                </el-breadcrumb>
            </div>

            <div class="mb-20 clearfix standard-content">
                <div class="left-section">
                    <img
                        src="http://pro99003c31.pic5.ysjianzhan.cn/upload/DRESQS.jpg"
                        alt="环境，食品，农残，兽残标准品"
                    />
                </div>
                <div class="right-section">
                    <p>深圳菲斯生物作为LGC旗下品牌DRE品牌深圳地区独家代理，广东地区代理，现对其产品优势做如下介绍：</p>
                    <p>1. 德国DAKKS认可， ISO17034/GUIDE 34认证</p>
                    <p>2. 品种丰富，满足多种试验需求</p>
                    <p>3. 形式多样，固标，单标和混标多种选择</p>
                    <p>4. 质检报告内容详尽，含溯源性声明和不确定度</p>
                    <p>5. 适用于国标GB,行标HJ,SN,NY等和国际标准方法</p>
                    <p>6. 现货齐全，菲斯生物有超2000多种热门产品库存，深圳地区可24小时内到货，其它地区48小时内到货</p>
                    <p>7. 包装精致，储存方便。</p>
                    <p class="mt-20 mb-20">深圳现货， 24小时内可送货上门！！！！</p>

                    <el-table
                        v-el-table-infinite-scroll="load"
                        :data="tableData"
                        :infinite-scroll-disabled="disabled"
                        height="1000px"
                    >
                        <el-table-column type="index" label="行号"></el-table-column>
                        <el-table-column prop="no" label="商品编号"> </el-table-column>
                        <el-table-column prop="name" label="商品全名"> </el-table-column>
                        <el-table-column prop="specs" label="规格"> </el-table-column>
                        <el-table-column prop="lotNo" label="批号"> </el-table-column>
                        <el-table-column prop="count" label="数量"> </el-table-column>
                        <el-table-column prop="unit" label="单位"> </el-table-column>
                        <el-table-column prop="temperature" label="保存温度"> </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'

document.title = '环境，食品，农残，兽残标准品'
// TODO从接口中获取
const tableData = ref([])
const allData = new Array(100).fill({
    no: 'C17607500',
    name: '海藻糖标准品',
    specs: '250mg',
    lotNo: '50811,2022.01.08.98.5%',
    count: 2,
    unit: '支',
    temperature: '常温',
})

const disabled = ref(false)
const page = ref(0)
const total = ref(5)

const load = () => {
    if (disabled.value) {
        return
    }

    page.value++

    if (page.value <= total.value) {
        tableData.value = tableData.value.concat(allData)
    }

    if (page.value === total.value) {
        disabled.value = true
    }
}
</script>
<script>
import ElTableInfiniteScroll from 'el-table-infinite-scroll'

export default {
    directives: {
        'el-table-infinite-scroll': ElTableInfiniteScroll,
    },
}
</script>
<style lang="scss" scoped>
.standard-banner {
    width: 100%;
    height: 400px;
    background-image: url(http://pro99003c31.pic5.ysjianzhan.cn/upload/BANNER-DRE1_ab58.jpg);
    background-repeat: no-repeat;
    background-attachment: scroll;
}

.left-section {
    width: 320px;
    height: auto;
    float: left;

    img {
        max-width: 100%;
    }
}

.right-section {
    float: right;
    width: 70%;

    p {
        color: #333;
        font-size: 14px;
    }

    .el-table {
        font-size: 12px;
        color: #5a5a5a;
    }
}

@media (max-width: 768px) {
    .page-center {
        width: auto !important;
    }
    .breadcrumb {
        margin-left: 10px;
    }

    .standard-banner {
        width: 100%;
        height: 233px !important;
        background-image: url(http://pro99003c31.pic5.ysjianzhan.cn/upload/BANNER-DRE1_ab58.jpg);
        background-size: auto 100%;
        background-position: center;
    }
    .standard-content {
        padding: 0 16px;
    }
    .left-section,
    .right-section {
        width: 100% !important;
        float: none !important;
    }
    .left-section {
        text-align: center;
    }
}
</style>
